<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>icon文档</span>
      </div>
      <el-row :gutter="20" class="body">
        <el-col v-for="item in list" :key="item" :span="3" class="item">
          <div class="iconBox">
            <svg-icon :icon-class="item" />
          </div>
          <p class="name">{{ item }}</p>
        </el-col>
      </el-row>
    </el-card>
    <h2>使用说明</h2>
    <el-divider />
    <h4>第一步：把svg文件放入icons/svg目录</h4>
    <h4>第二步：运行</h4>
    <p class="codeTemplate">
      <span class="orange">npm run svg</span>
    </p>
    <h4>第三步：vue文件中使用</h4>
    <p class="codeTemplate">
      <span class="orange">{{ text }}</span>
    </p>
  </div>
</template>
<script>
import list from '@/icons/assets/filesName'
export default {
  name: 'GalleryDemo',
  data() {
    return {
      text: '<svg-icon :icon-class="fileName" />',
      list: [],
    }
  },
  mounted() {
    this.list = list
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.iconBox {
  line-height: 20px;
  text-align: center;
  font-size: 20px;
  color: #333;
}
.name {
  text-align: center;
  font-size: 14px;
  color: #333;
}
.item {
  margin-bottom: 20px;
}
.item:hover {
  .iconBox {
    color: #1890ff;
  }
  .name {
    color: #1890ff;
  }
}
.orange {
  font-size: 14px;
  color: #e29629;
}
.codeTemplate {
  background: #f7f7f7;
  font-size: 14px;
  color: #333;
  padding: 20px;
}
</style>
